<template>
<view class="goods">
  <view class="imgBox">
    <image :src="image"></image>
    <view class="content">
      <view class="name"> {{ goods.goodsName }}</view>
      <view class="model">{{ `1${goods.boxUnitName}${goods.boxUnitCount}${goods.mainUnitName}` }}</view>
      <view class="price">{{ goods.taxBoxPrice }}
        <view class="selected flex a-item j-content" @click="selectGoods">
          选规格
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  name: "searchGoods",
  props:{
    goods:{
      type:Object,
      default:()=>{return{}}
    }
  },
  created() {
    this.goods.imageUrl && this.getImage(this.goods.imageUrl)
  },
  data(){
    return{
      image:'https://www.zjjqf.cn/file/static/undefined.png'
    }
  },
  methods:{
    getImage(url){
      const list = JSON.parse(url)
      if (list)
        this.image = list[0].path
      this.goods.image = this.image
      this.$emit('update:goods',this.goods)
    },
    selectGoods(){
      this.$emit('selectGoods',this.goods)
    },
  }
}
</script>

<style lang="scss" scoped>
.goods{
  width: 350rpx;
  background: white;
  margin: 10rpx;
  border-radius: 30rpx;
  overflow: hidden;
  font-family: PingFang SC;
  .imgBox{
    image{
      width: 350rpx;
      height: 350rpx;
    }
  }
  .content{
    padding-left: 30rpx;
    .name{
      font-size: 28rpx;
      padding: 10rpx 0 10rpx 0;
      margin-bottom: 40rpx;
    }
    .model{
      color: #9E9EA2;
      font-size: 25rpx;
    }
    .price{
      color: red;
      font-size: 35rpx;
      position: relative;
      font-weight: bold;
      &:before{
        content: '￥';
        font-size: 30rpx;
      }
      margin-bottom: 30rpx;
      .selected{
        width: 100rpx;
        height: 50rpx;
        position: absolute;
        background: red;
        color: #ffffff;
        border-radius: 15rpx;
        right: 10rpx;
        bottom: 20rpx;
        font-weight: 600;
        font-size: 26rpx;
      }
    }
  }
}

</style>
